package me.fung.wubi.app.component

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex

private val boxPadding = 5.dp

@Composable
fun groupColumn(
    title: String, modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
) {
    Box(modifier = Modifier.padding(top = boxPadding)) {
        Text(
            title,
            modifier = Modifier.offset().zIndex(9f).padding(horizontal = 20.dp)
                .background(MaterialTheme.colors.background)
                .padding(horizontal = 10.dp)
        )
        Column(
            modifier = modifier.padding(top = 10.dp).border(1.dp, Color.DarkGray, RoundedCornerShape(5.dp))
                .padding(10.dp).width(IntrinsicSize.Max).height(IntrinsicSize.Max),
            verticalArrangement = verticalArrangement,
            horizontalAlignment = horizontalAlignment,
            content = content,
        )
    }
}

@Composable
fun groupRow(
    title: String,
    modifier: Modifier = Modifier,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
) {
    Box(modifier = Modifier.padding(top = boxPadding)) {
        Text(
            title,
            modifier = Modifier.offset().zIndex(9f).padding(horizontal = 20.dp)
                .background(MaterialTheme.colors.background)
                .padding(horizontal = 10.dp)
        )
        Row(
            modifier = modifier.padding(top = 10.dp).border(1.dp, Color.DarkGray, RoundedCornerShape(5.dp))
                .padding(10.dp).width(IntrinsicSize.Max).height(IntrinsicSize.Max),
            verticalAlignment = verticalAlignment,
            content = content,
        )
    }
}

@Composable
fun groupBox(title: String, modifier: Modifier = Modifier, content: @Composable BoxScope.() -> Unit) {
    Box(modifier = Modifier.padding(top = boxPadding)) {
        Text(
            title,
            modifier = Modifier.offset().zIndex(9f).padding(horizontal = 20.dp)
                .background(MaterialTheme.colors.background)
                .padding(horizontal = 10.dp)
        )
        Box(
            modifier = modifier.padding(top = 10.dp).border(1.dp, Color.DarkGray, RoundedCornerShape(5.dp))
                .padding(10.dp).width(IntrinsicSize.Max).height(IntrinsicSize.Max),
            content = content,
        )
    }
}